<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>角色管理</title>
<#assign base=request.contextPath  />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${base}/MyStatic/frame/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${base}/MyStatic/css/demo.css" type="text/css">
    <link rel="stylesheet" href="${base}/MyStatic/css/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="${base}/MyStatic/js/ztree/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="${base}/MyStatic/js/ztree/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="${base}/MyStatic/js/zhang.js"></script>
    <script type="text/javascript" src="${base}/MyStatic/js/ztree/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="${base}/MyStatic/js/ztree/jquery.ztree.exedit.js"></script>
    <script type="text/javascript" src="${base}/MyStatic/js/zhang.js"></script>
    <style type="text/css">
        form {
            padding: 20px;
        }

        .layui-btn-radius {
            border-radius: 5px;
        }
    </style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>角色管理</legend>
</fieldset>
<div class="demoTable" style="padding:15px;">
      <@shiro.hasPermission name="button:角色管理添加">
    <button class="layui-btn layui-btn-radius" id="btn2" data-method="offset" type="button"
            style="background-color: #0092EF;">添加角色
    </button>
          </@shiro.hasPermission>
    <div style="float:right">
    <#--         <div class="layui-inline">
                   <input class="layui-input" name="id" id="demoReload" autocomplete="off">
             </div>-->
    <#-- <button class="layui-btn layui-btn-radius" id="btn1" data-type="reload" style="background-color: #0092EF;">搜索</button>-->

    </div>
</div>
<table class="layui-hide" id="test"></table>
<script type="text/html" id="barDemo">
    <@shiro.hasPermission name="button:角色管理删除">
    <i class="layui-icon layui-icon-delete layui-btn-xs" lay-event="del" href="javascript:void(0)"
       onclick="delectRole('{{d.id}}')" style="font-size: 20px;"></i>
    </@shiro.hasPermission>
</script>
<script src="${base}/MyStatic/frame/layui/layui.js"></script>
<script>
    layui.use(['form', 'layedit', 'laydate', 'table'], function () {
        var form = layui.form
                , $ = layui.jquery
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate
                , table = layui.table;
        table.render({
            elem: '#test'
            , url: '${base}/role/findRole'//数据接口
            , height: 500
            , cols: [[
                {
                    field: 'id', templet: function (val) {
                        return val.LAY_INDEX
                    }, align: 'center', title: '序号'
                }
                , {field: 'roleName', align: 'center', title: '角色'}
                , {
                    field: 'createTime', align: 'center', templet: function (val) {
                        return changeDateFormat(val.createTime)
                    }, title: '创建时间'
                }
                  <@shiro.hasPermission name="button:角色管理删除">
                , {field: 'right', align: 'center', title: '操作', toolbar: '#barDemo'}
                </@shiro.hasPermission>
            ]]
            , id: 'testReload'
            , page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                , theme: '#0092EF'
                , limit: 20
            }, done: function (res, curr, count) {
                this.where = {};
            }
        });
        $('#btn1').on('click', function () {
            var whereData = {};
            whereData.roleName = Trim($("#demoReload").val())
            var table = layui.table;
            //表刷新方法
            table.reload('testReload', {
                url: '${base}/MyStatic/role/findRole'
                /*   ,where: whereData*/
            });

        });
        var active = {
            offset: function (othis) {
                var type = othis.data('type')
                        , text = othis.text();
                layer.open({
                    type: 2,
                    title: '添加角色',
                    shadeClose: false,
                    area: ['560px', '560px'],
                    content: '${base}/role/roleAdd.html',
                    success: function (layero, index) {
                        var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    }
                });
            }
        };
        $('#btn2').on('click', function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
    });

    function delectRole(id) {

         layer.confirm('真的要删除吗?', function (index) {
            $.ajax({
                type: "POST",
                url: "${base}/role/delRole",
                data: {roleId: id},
                dataType:"json",
                success: function (data) {
                    layer.close(index);
                    if (data.code === 0) {
                        var table = layui.table;
                        //表刷新方法
                        table.reload('testReload', {
                            url: '${base}/role/findRole'
                            , where: {} //设定异步数据接口的额外参数
                        });

                    } else {
                        layer.msg(data.msg)
                    }
                }
            });
        });
    }
</script>
</body>
</html>